import router from '@/router'
import store from '@/store'
import axios from 'axios' // 引入
import { Message } from 'element-ui'

// 导出路由基地址
export const baseURL = 'http://big-event-vue-api-t.itheima.net' // 接口基地址    基地址+apiUrl = 接口完整地址
// 创建自定义axios
const myAxios = axios.create({
  baseURL // 接口基地址    基地址+apiUrl = 接口完整地址
})

// 请求拦截器
myAxios.interceptors.request.use(function (config) {
  // 在发起请求时统一携带Authorization和token值(做判断,除注册和登录外,其他页面才需要token)
  if (store.state.token) {
    config.headers.Authorization = store.state.token
  }
  // 请求成功,每次api请求前会触发一次    config是配置对象,要请求后台的参数都在这个对象上(return给axios源码)
  return config
}, function (error) {
  // 请求失败,返回一个拒绝状态的Promise对象(请求留在原地的值就是error变量值)
  return Promise.reject(error)
})

// 响应拦截器
myAxios.interceptors.response.use(function (response) {
  // 响应状态码为 2xx 或  3xx 时进行该回调  形参的response是"成功的结果"
  return response
}, function (error) {
  console.dir(error) // 详细打印
  // 响应状态码为 4xx 或  5xx 时进行该回调  形参的error是"失败的结果"
  if (error.response.status === 401) {
    // 本次响应token值过期(清除vuex中的数据并退出到登录页)
    store.commit('updateToken', '')
    store.commit('updateUserInfo', {})
    router.push('/login')
    Message.error('用户身份已过期,请重新登录!') // 给个弹框提示
  }
  return Promise.reject(error)
})

// 导出自定义axios函数
export default myAxios

// js文件定义的方法和变量，需要导出，外部才能引入文件使用
